<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <!--定义一个画布包含基本3个属性-->
    <canvas id="demo" width="500" height="500">
        <!-- 此处的文字正常不会显示-->
        您的浏览器不支持canvas
    </canvas>
</body>
<script>
    //1找到画布对象
    var canvas = document.getElementById('demo')
    console.log([canvas])
    //2获取上下文对象（画笔）
    var ctx = canvas.getContext('2d')
    console.log(ctx)
    //3绘制路径
    ctx.rect(50,50,300,300)
    //4填充
    ctx.fillStyle = 'aqua'
    ctx.fill()
    //5描边，渲染路径
    ctx.lineWidth = 20
    ctx.strokeStyle = 'salmon'
    ctx.stroke()
</script>
</html>
